﻿@{
    Layout = null;
}

<style type="text/css">
    .img_item {
        height: 100px;
        width: auto;
        border: 5px solid gray;
        border-radius: 2px;
        margin: 10px;
    }
</style>

<img class="img_item img_clone" src="#" alt="" onclick="DelUpImage(this)" style="display:none;" />
<input id="img_hidden" type="file" name="img_upload" onchange="upload()" style="display:none;" />

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-md-12">
                <div class="pull-right">
                    <a class="label label-danger" id="add_url_btn" href="javascript:;" target="_blank">添加URL</a>
                    <a class="label label-primary" id="up_img_btn" href="javascript:;" target="_blank">上传</a>
                </div>
                <div class="pull-left">
                    <strong id="_up_form_title" style="line-height:24px;"></strong>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body" id="up_img_con"></div>
</div>

<script src="~/ui/jq-plus/ajaxfileupload.js"></script>
<script type="text/javascript">
    var up_img_con = 'up_img_con';
    var clone_cls = 'img_clone';
    var up_ipt_id = 'img_hidden';

    function AddUpImage(url) {
        var img = $("." + clone_cls).clone().removeClass(clone_cls).attr('src', url).show();
        $("#" + up_img_con).append(img);
    }
    function DelUpImage(img) {
        if (!confirm('确定删除此图片')) { return false; }
        $(img).remove();
    }
    function GetImgs() {
        return $('#' + up_img_con).find('img');
    }
    function GetImgsJson() {
        var imgs = [];
        var list = GetImgs();
        list.each(function (i) {
            var img = list.eq(i);
            imgs.push(img.attr('src'));
        });
        return JSON.stringify(imgs);
    }
    function upload() {
        if (window.up_max_count) {
            var count = window.up_max_count();
            if (GetImgs().length >= count) {
                alert('最多只能上传' + count + '张图片');
                return false;
            }
        }

        $.ajaxFileUpload({
            url: '/Common/UploadImage/',
            fileElementId: up_ipt_id,
            type: 'POST',
            dataType: 'json',
            success: function (res) {
                if (res && res.success) {
                    AddUpImage(res.file_url);
                }
                else {
                    alert(res.msg);
                }
            }
        });
    }
    $(function () {
        //设置标题
        var form_title = window.up_form_title;
        if (!form_title || form_title.length <= 0) {
            form_title = '图片';
        }
        $('#_up_form_title').text(form_title);

        //注册点击事件
        $('#up_img_btn').click(function () {
            $('#img_hidden').trigger('click');
            return false;
        });
        $('#add_url_btn').click(function () {
            var url = prompt('请输入图片URL');
            if (url == null || url == '') {
                return false;
            }
            AddUpImage(url);
            return false;
        });
    });
</script>

@{
    var images = ViewData["up_img"] as List<string>;
    if (ValidateHelper.IsPlumpList(images))
    {
        foreach (var img in images)
        {
            <script type="text/javascript">
                $(function () {
                    AddUpImage("@(img)");
                });
            </script>
        }
    }
}
